<template>
  <div id="app">
    <van-nav-bar
      title="系统首页"
      left-text="退出"
      right-text="首页"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
 
      <div class="main" >
      <div class="div1">零件订购管理系统</div>
      <div class="div2">欢迎登录！</div>
      <div class="div2"> welcome!!!</div>

      </div> 


    <!-- tabBar -->
    <van-tabbar v-model="tabarActive">
      <van-tabbar-item icon="setting-o" @click="redirects('/comps')">零件列表</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="redirects('/supplier')">供应商</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="redirects('/contacts')">联系人</van-tabbar-item>
      <van-tabbar-item icon="cart-o" @click="redirects('/order')">订购管理</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabarActive:-1,
    }
  },
  created() {},
  methods: {
    onClickLeft() {
      this.logout()
    },
    onClickRight() {
       this.$router.push('/home')
    },
    //跳转页面
    redirects(url) {
      this.$router.push(url)
    },
    logout() {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  position: absolute;
  bottom: 50%;
  transform: translate(50%,50%);
  .div1 {
    position: relative;
    padding-bottom: 1rem;
  }
  .div2 {
    position: relative;
    padding-left: 1rem;
    padding-top: 1rem;
  }


}
</style>
